<template>
  <div class="edit-wrap">
	  <Header></Header>
	  <div class="main-wrap">
		  <!-- <EditModelForLeft ref="editModelForLeftRef"></EditModelForLeft> -->
		  <div class="main-wrap-content">
			  <div class="left-add-button">
				  <ul>
						<li>平移</li>
						<li>缩放</li>
						<li>旋转</li>
				  </ul>
			  </div>
			  <div class="main-wrap-scene"></div>
			  <EditModelForBottom></EditModelForBottom>
		  </div>
		  <EditModelForRight></EditModelForRight>
	  </div>
	  <div class="footer-wrap"></div>
  </div>
</template>


<script setup lang="ts">
	import Header from "./components/header/header.vue"
	import EditModelForRight from "./components/right/EditModelForRight.vue"
	import EditModelForBottom from "./components/bottom/EditModelForBottom.vue" 
	
	
</script>

<style scoped>
	
	.left-add-button {
		position: absolute;
		top: 16px;
		left: 20px;
		height: 30px;
		border: 1px solid #606374;
		background-color: #2b2c2f;
		border-radius: 2px;
		display: flex;
		align-content: flex-end;
		justify-content: flex-end;
		align-items: flex-end;
		>ul{
			>li{
				list-style: none;
				float: left;
				color: #ccc;
				margin-right: 0.3125rem;
				margin-left: 0.3125rem;
				cursor: pointer;
			}
		}
	}
	
	
/deep/.el-drawer {
		border: 1px solid #181e27;
	}
	
	
/deep/.el-drawer__header {
	    align-items: center;
	    color: #72767b;
	    display: flex;
		margin-bottom:0px;
	    padding: 5px;
	    padding-bottom: 0;
	    height: 40px;
	}
	
/deep/.el-drawer__body {
    flex: 1;
    padding: 0px;
    overflow: hidden;
}
	
	
	.edit-wrap{
		width: 100%;
		height: 100%;
		color: #fff;
		position: relative;
		z-index: 1002;
		background-color: transparent;
		overflow: hidden;
		>.main-wrap{
			width: 100%;
			background-color: #2d323e;
			position: relative;
			height: calc(100% - 64px);
			
			display: -webkit-flex;
			display: flex;
            -webkit-flex-direction: row;
            flex-direction: row;
			>.main-wrap-left{
				width: 13.75rem;
				background-color: rebeccapurple;	
			}
			>.main-wrap-content{
				flex: 1;
				background-color: transparent;
				display: -webkit-flex;
				display: flex;
				-webkit-flex-direction: column;
				flex-direction: column;
				>.main-wrap-scene{
					flex: 1;
					point-events:none
				}
			}
		}
		>.footer-wrap{
			width: 100%;
			height: 19px;
			border-top: 1px solid #181e27;
			position: fixed;
			left: 0;
			right: 0;
			margin: auto;
			bottom: 0;
			color: #9f9f9f;
			background: #282e39;
			font-size: 12px;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			z-index: 1;
		}
	}
	
	/deep/.el-dialog__header {
	    padding: var(--el-dialog-padding-primary);
	    padding-bottom: 10px;
		margin-right: 0px;
	    border-bottom: 1px solid #424653;
	    background-color: #313235;
		height: 40px;
	}
</style>